<template>
	<view class="leave_box">
    <navTitle :titleRight="'申請記錄'" :title="'請假'" :jumpUrl="jumpUrl"></navTitle>
    <view class="row-title">請選擇請假類型</view>
    <view class="row-p" @tap="handleQJ(item,index)" v-for="(item,index) in askleaveTypeList" :key="index">
      <view class="r-p-l">{{item.name}}
        <view>{{item.desc}}</view>
      </view>
      <view class="r-p-r">
        <view v-show="item.num>0">{{ item.num }}{{ item.unit=='day'?'天':'小時' }}</view>
        <img src="/static/images/boss/icon_b_arrow_right.png" mode="scaleToFill" alt="">
      </view>
    </view>
	</view>
</template>

<script>
import { askleaveType } from '../../utils/api'
import navTitle from './components/nav-title.vue';
export default {
	components: {navTitle},
	data() {
		return {
      jumpUrl:'/pages/boss/leaveRecord',
      askleaveTypeList:[],
		};
	},
	props: {
		couponList: {}
	},
	computed: {},
  onShow() {
    this.getAskleaveTypeList()
  },
	methods: {
    async getAskleaveTypeList(){
      let res=await askleaveType({})
      if(res.code==1){
        this.askleaveTypeList=res.data
      }else{
        uni.showToast({
          icon:'none',
          title: res.msg||'系統異常'
        });
      }
    },
    handleQJ(item,index){
      uni.navigateTo({ url: `/pages/boss/leaveAdd?index=${index}`});
    }
	}
};
</script>
<style lang="scss" scoped>
.leave_box{
  width: 100%;
  height: 100vh;
  overflow-y: scroll;
  background: #F4F6FA;
}
.row-title{
  padding: 15px 10px;
  font-size: 15px;
  color: #666666;
  line-height: 21px;
}
.row-p{
  width: calc(100% - 40px);
  padding: 15px 10px;
  margin: 0 auto 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  border-radius: 10px;
}
.r-p-l{
  flex: 2.3;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-weight: 500;
  font-size: 16px;
  color: #333333;
  line-height: 23px;
  view{
    font-size: 13px;
    color: #666666;
    line-height: 18px;
    margin-left: 30px;
  }
}
.r-p-r{
  flex: 1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  view{
    font-weight: 600;
    font-size: 15px;
    color: #333333;
    line-height: 20px;
    margin-right: 10px;
  }
  img{
    width: 8px;
    height: 14px;
  }
}
</style>
